<template>
  <el-row>
    <el-col :span="24">
      <RemarkForm v-model="remark"
                  :placeholder="placeholder" />
    </el-col>
    <el-col :span="24">
      <div class="footer">
        <el-button type="default"
                   @click="handleCancel">取消</el-button>
        <el-button type="primary"
                   @click="handleSubmit"
                   :disabled="disabled">确定</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import axios from 'axios'
export default {
  name: "RemarkSubmit",
  props: {
    data: Object,
    method: {
      type: String,
      default () {
        return "PUT"
      }
    },
    value: [],
    url: String,
    placeholder: {
      type: String,
      default () {
        return "请输入备注";
      }
    },
    field: {
      type: String,
      default () {
        return "remark"
      }
    }
  },
  data () {
    return {
      remark: null,
      disabled: false,
    }
  },
  created () {
    // this.remark = this.value
  },
  methods: {
    async handleSubmit () {
      if (!this.remark) {
        this.$message({ type: 'error', message: this.placeholder })
        return
      }
      const remark = {
        ...this.data
      }
      remark[this.field] = this.remark;

      this.disabled = true;
      const { code, message } = await axios({
        method: this.method,
        url: this.url,
        data: remark,
      });
      this.disabled = false;
      if (0 !== code) {
        this.$message({ type: "error", message });
        return
      }
      this.$message({ type: "success", message });
      this.$emit("confirm", remark);
      this.remark = null;
    },
    handleCancel () {
      this.$emit("cancel");
    }
  }
}
</script>